<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/15
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>活动管理</title>
<%--    引入样式表--%>
      <link rel="stylesheet" href="static/layui/css/layui.css">
<%--    引入js文件--%>
      <script src="static/layui/layui.js"></script>
      <script src="static/layui/layuiExt/qrcode.js"></script>
  </head>
  <body>
  <script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-xs" lay-event="qrcode">查看二维码</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="url">查看网址</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="outline">下线</a>
    <a class="layui-btn  layui-btn-xs" lay-event="online">上线</a>
  </script>
  <div  style="display: none;padding: 20px" id="myqrcode"></div>
  <table id="demo" lay-filter="test">
  </table>
  </body>
    <script>
      layui.config({
        base: 'static/layui/layuiExt/' //配置 layui 第三方扩展组件存放的基础目录
      }).extend({
        qrcode: 'qrcode'
      }).use(['table','form','jquery','laydate','qrcode'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var table = layui.table;
            //第一个实例
           var myTable= table.render({
                elem: '#demo'
                ,height: 450
                ,url: '${pageContext.request.contextPath}/business?method=findAllBusiness' //数据接口
                ,page: true //开启分页
                ,limit:5
                ,limits:[5,10,15,20,25,30]
                ,toolbar:true
                ,autoSort: false//关闭前端自动排序，开启了后端的服务器排序
                ,cols: [[ //表头
                    {field: 'id', title: '活动编号', width:100, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '活动名称', width:120}
                    ,{field: 'count', title: '报名人数', width:120, sort: true}
                     ,{field: 'status', title: '状态', width:60,
                 templet: function(d){
                    if( d.status==0){
                      return '<button type="button" class="layui-btn  layui-btn-xs">正常</button>'
                    }else {
                      return '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs">下线</button>'
                    }

                   //得到当前行数据，并拼接成自定义模板

                 }}
                    ,{field: 'begin', title: '开始时间', width:180}
                    ,{field: 'end', title: '结束时间', width:180}
                    ,{field: 'create_time', title: '创建时间', width:180}
                    ,{field: 'create_person', title: '创建人', width:180}

                    ,{fixed: 'right', title: '操作',width: 360, align:'center', toolbar: '#barDemo',fixed: 'right'}
                ]]
            });

          //触发排序事件
          table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
              initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
              ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                field: obj.field //排序字段
                ,order: obj.type //排序方式
              }
            });
          });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data //获得当前行数据
                  ,layEvent = obj.event; //获得 lay-event 对应的值
          if(layEvent === 'update'){
            console.log(data);
            laydate.render({
              elem: '#test7'
              ,type: 'datetime'
            });
            laydate.render({
              elem: '#test8'
              ,type: 'datetime'
            });
            //表单赋值
            form.val('example', {
              "id": data.id
              ,"name": data.name
              ,"count": data.count
              ,"begin": data.begin
              ,"end": data.end
              ,"createPerson": data.createPerson
            });

            //修改活动信息
            layer.open({
              title: '修改活动',
              type: 1,
              area: ['600px', '400px'],
              content: $("#updateBusinessForm")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });


          } else if(layEvent === 'outline') {
            layer.confirm('真的要下线么', function (index) {
              //obj.del(); //删除对应行（tr）的DOM结构
              //删除数据库中的数据
              console.log(data)
              $.ajax({
                url: "${pageContext.request.contextPath}/business?method=outlineBusinessById",
                type: "POST",
                dataType: "JSON",
                data: {id: data.id},
                success: function (ret) {
                  if (ret.code == 0) {
                    //刷新表格数据
                    myTable.reload({
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                    layer.msg(ret.msg, {icon: 6});
                  } else {
                    layer.msg(ret.msg, {icon: 5});
                  }
                }
              })
              layer.close(index);
              //向服务端发送删除指令

            })
          } else  if(layEvent === 'url'){
            //修改活动信息
            layer.open({
              title: '报名网址',
              type: 1,
              area: ['400px', '200px'],
              content: "http://192.168.112.125:8080/userinfo/student?method=toAddStudentPage&businessId="+data.id//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });

          }else if(layEvent === 'qrcode'){
            //将原有的二维码清空
            $('#myqrcode').html("");
            //生成新的二维码
            $('#myqrcode').qrcode({
              render: "canvas",  //table
              width: 200,
              height: 200,
              foreground: "#15cc1c",
              background: "#FFF",
              //text: "http://118.190.158.17:10520/student/toAddStudentPage?businessId="+data.id,
               text: "http://192.168.43.119:8080/userinfo/student?method=toAddStudentPage&businessId="+data.id,
            });
            //修改活动信息
            layer.open({
              title: '报名二维码',
              type: 1,
              area: ['240px', '300px'],
              content: $("#myqrcode")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });

          }
        });


        });
    </script>
</html>
